<template>
  <div>
    <MyHeader name-page="Balance" :btn-active="true" />
    <div class="balancePage__block">
      <div class="balancePage__block__balance__block">
        <p class="balancePage__block__balance__block__label">
          Your account balance
        </p>
        <p class="balancePage__block__balance__block__sum">{{ balance }}</p>
      </div>
      <button class="balancePage__block__btnTopBalance" @click="goToRefill">
        Top balance
      </button>
      <div class="balancePage__block__history">
        <p class="balancePage__block__history__label">History:</p>
        <history-item
          class="balancePage__block__history__list"
          v-for="(item, index) in operation"
          :key="index"
          :date="item.date"
          :currency="item.currency"
          :sum="item.sum"
          :type="item.type"
        />
      </div>
    </div>
  </div>
</template>

<script>
import HistoryItem from "@/components/HistoryItem.vue";
import MyHeader from "@/components/UI/MyHeader.vue";
import BalanceService from "./BalanceService.ts";

export default {
  name: "BalancePage",
  components: { HistoryItem, MyHeader },
  data() {
    return {
      balance: "∞",
      operation: [],
    };
  },
  methods: {
    goToRefill() {
      this.$router.push("/refillBalance");
    },
  },
  created() {
    BalanceService.reqBalance(window.Telegram.WebApp.initDataUnsafe.user.id)
      .then((res) => (this.balance = res))
      .catch((error) => alert(error));
    BalanceService.reqTransactionList(
      window.Telegram.WebApp.initDataUnsafe.user.id
    )
      .then((res) => (this.operation = res.reverse()))
      .catch((error) => alert(error));
  },
};
</script>

<style scoped>
.balancePage__block {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.balancePage__block__balance__block {
  height: 100%;
  width: 100%;
  margin: 10% 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.balancePage__block__balance__block__label {
  font-size: 15px;
  font-weight: 800;
  font-family: "Roboto", sans-serif;
  color: var(--tg-theme-text-color);
  line-height: 1.2;
}

.balancePage__block__balance__block__sum {
  font-size: 40px;
  font-weight: 800;
  font-family: "Roboto", sans-serif;
  color: var(--tg-theme-text-color);
  word-wrap: break-word;
}

.balancePage__block__btnTopBalance {
  width: 40%;
  height: 40px;
  color: var(--tg-theme-button-text-color);
  background-color: var(--tg-theme-button-color);
  border-radius: 12px;
  outline: none;
}

.balancePage__block__history {
  margin: 10% 0;
  width: 80%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.balancePage__block__history__label {
  font-size: 15px;
  font-weight: 800;
  font-family: "Roboto", sans-serif;
  color: var(--tg-theme-text-color);
  margin-bottom: 15px;
}

.balancePage__block__history__list {
  margin: 10px 0;
}
</style>